<template>
  <el-dialog v-model="dialogVisible" title="环境管理" class="environment-dialog" width="1000">
    <div style="display: flex;">
      <div class="menu">
        <el-menu :default-active="defaultActive">
          <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.id">
            <span class="menutext">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="main">
        <div class="main-titile">
          <span> {{ dialogTitle }}</span>
        </div>
        <div class="main-content">
          <environmentTable ref="environmentTableRef" @success="dialogVisible = false"/>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import environmentTable from './environmentTable.vue';
import { useCache } from '@/hooks/web/useCache'
const environmentTableRef = ref()
const dialogVisible = ref(false) // 弹窗的是否展示
const { wsCache } = useCache()
const environmentParams = computed(()=>wsCache.get('enviromentParams')) 
const menuList = ref([] as any)
const defaultActive = ref('')
const dialogTitle = ref()
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  menuList.value = [{id:environmentParams.value.environmentId,name:environmentParams.value.envName}]
  defaultActive.value = environmentParams.value.environmentId
  dialogTitle.value = environmentParams.value.envName
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const submitForm = async () => {
  environmentTableRef.value.submit()
}

</script>


<style lang="scss">
.environment-dialog {

  //padding-top: 0;
  //padding-left: 0;
  .menu {
    background-color: transparent;
    border-right: 1px solid var(--menu-border-color);
    height: 100%;
    width: 25%;
    padding-left: 2%;
    padding-bottom: 2%;

    .menu-title {
      padding-top: .5rem;
      padding-bottom: .5rem;
      opacity: .5;
      font-size: .75rem;
    }

    .operation-list {
      p {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin: 0 0 10px 0;
        cursor: pointer;

        .el-icon {
          margin-right: 10px;
        }

        &:last-child {
          border: none;
          margin-bottom: 0;
          padding: 0;
        }
      }
    }

    .menutext {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .main {
    width: 73%;
    padding: 1%;

    .main-titile {
      font-size: 16px;
      // color: #344054;
      padding: 0 0 15px 15px;

      .edit-button {
        margin-left: 1%;
        padding: 0;
        height: 25px;
        width: 25px;
      }
    }

    .main-content {
      display: flex;
      flex-direction: column;

      .content-title {
        margin: 15px 12px 8px;
        font-size: 14px;
        // color: #344054;
      }
    }
  }

  >.el-dialog__footer {
    padding-top: 0;
  }

  .el-table__body-wrapper {
    left: 10px;
  }

  .el-table th.is-leaf {
    border: none;
  }

  .el-table__inner-wrapper:before {
    height: 0;
  }
}
</style>

<style scoped lang="scss">
.environment-dialog {
  .el-menu {
    background-color: transparent;
    border-right: 0;
  }

  .el-menu-item {
    height: 2rem;
    line-height: 2rem;
    font-size: 14px;
    // color: #344054;
    display: flex;
    justify-content: space-between;

    i {
      font-size: 12px;
    }
  }

  .el-menu-item.is-active {
    background-color: rgba(64, 158, 255, .1);
    color: #409eff;
  }

  .el-popover.el-popper {
    min-width: 100px !important;
  }
}

:deep(.el-table td.el-table__cell div) {
  background: transparent;
}

:deep(.el-table tr) {
  background: transparent !important;
}
</style>

<style>
.el-popover.my-popper {
  min-width: 100px !important;
}
</style>
